<template>
  <div class="ts">
    <h2>TS前言</h2>
    一、
    <p class="txt-color">
      TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript
      的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript
      提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript
      和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。下图显示了 TypeScript
      与 ES5、ES2015 和 ES2016 之间的关系：
    </p>
    <img
      class="tsimg"
      src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zdGF0aWMwMDEuZ2Vla2Jhbmcub3JnL2luZm9xLzFiLzFiYjIyNmJlMjcxY2JiOTY5ZTU1NTEzMzg0ZjI0MDFkLnBuZw?x-oss-process=image/format,png"
      alt=""
    />
    <h3>1.1 TypeScript 与 JavaScript 的区别</h3>
    <img
      enter-class="tsimg"
      src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zdGF0aWMwMDEuZ2Vla2Jhbmcub3JnL2luZm9xLzlhLzlhNDkwYjZhMDIyNWEyZmJiMDE1NWI4ZDU0NmJiMmEwLmpwZWc?x-oss-process=image/format.png"
      alt=""
    />
    <h3>1.2 获取 TypeScript</h3>
    <p>命令行的 TypeScript 编译器可以使用 Node.js 包来安装。</p>
    <h3>1.3 安装 TypeScript</h3>
    <p class="codebgc">npm install -g typescript</p>
    <h3>1.4 编译 TypeScript 文件</h3>
    <p class="codebgc">tsc index.ts</p>
    <p>
      当然，对于刚入门 TypeScript 的小伙伴，也可以不用安装 typescript，而是直接使用线上的
      <a
        href="https://www.typescriptlang.org/play?#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCoASMFmgY7p7ehCTkVOle4jUMdRLYTqCc8LEZzCZmoNJODPHFZZXVtZYYkAAeRJTInDQS8po+rf40gnjbDKv8LqD2jpbYoACqAEoAMsK7sUmxkGSCc+VVQQuaTwVb1UBrDYULY7PagbgUZLJH6QbYmJAECjuMigZEMVDsJzCFLNXxtajBBCcQQ0MwAUVWDEQNUgADVHBQGNJ3KAALygABEAAkYNAMOB4GRogLFFTBPB3AExcwABT0xnM9zsyhc9wASmCKhwDQ8ZC8iElzhB7Bo3zcZmY7AYzEg-Fg0HUiS58D0Ii8AoZTJZggFSRxAvADlQAHJhAA5SASAVBFQAeW+ZF2gldWkgx1QjgUrmkeFATgtOlGWH0KAQiBhwiudokkuiIgMHBx3RYbC43CCJSAA"
        target="_blank"
        rel="noopener noreferrer"
      >
        TypeScript Playground
      </a>
      来学习新的语法或新特性。
    </p>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
@import '@/global.scss';

.txt-color {
  @extend .ts-txt-color;
}
.tsimg {
  margin: 20px auto;
  text-align: center !important;
  display: inherit;
}
.codebgc {
  @extend .codebgc;
}
</style>